<template>
	<view class="page-apply-wrapper">
		<custom-nav title="申请企业" themeColor="#333"></custom-nav>
		<view class="apply-header">
			<image class="header-bg" src="../../../static/img/serve/head.png"></image>
			<view class="apply-head_info">
				<view class="flow-item flex-act">
					<view class="flow-step">
						<up-icon name="checkmark-circle-fill" color="#FF7139" size="26"></up-icon>
					</view>
					<text class="r-text1">香港公司基本信息</text>
				</view>
				<view class="flow-line"></view>
				<view class="flow-item">
					<view class="flow-step">
						<up-icon name="checkmark-circle-fill" color="#FF7139" size="26"></up-icon>
					</view>
					<text class="r-text2">公司计划拓展升级目标地区/国家</text>
				</view>


			</view>
		</view>
		<view class="apply-content">
			<view class="apply-form-wrapper">
				<view class="apply-form">
					<up-form labelPosition="top" :model="model1" :rules="rules" ref="uFormRef">
						<view class="apply-form-section">
							<!-- <view class="serve-item-header">
								<text class="head-b"></text>
								<text class="item-tit">企业基本信息</text>
							</view> -->
							<up-form-item label="目标地区/国家:" required prop="target_country" ref="item1" labelWidth="auto">
								<up-input v-model="model1.target_country" border="none" placeholder="请输入"></up-input>

							</up-form-item>
							<up-form-item label="目标市场是否已经成立公司:" required prop="target_is_have_company" ref="item1"
								labelWidth="auto">
								<up-radio-group placement="row" v-model="model1.target_is_have_company">
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="1"
										label="是">
									</up-radio>
									<up-radio :customStyle="{marginLeft: '4px'}" activeColor="#FF7139" name="0"
										label="否">
									</up-radio>
								</up-radio-group>
							</up-form-item>
							<up-form-item label="计划使用基金范围:" required prop="plan_to_fund_id" ref="item1"
								labelWidth="auto">
								<up-radio-group placement="column" v-model="model1.plan_to_fund_id"  @change="groupChange">
									<up-radio v-for="(item,index) in studyChannelList" :key="index" :customStyle="{marginLeft: '4px'}" 
									activeColor="#FF7139" :name="item.id" :label="item.name">
									</up-radio>
								</up-radio-group>
							</up-form-item>
						</view>
					</up-form>

				</view>
			</view>

		</view>
		<view class="apply-btn-wrapper">
			<view class="apply-btn apply-btn-pre" @click="handlePre">
				<text>上一步</text>
			</view>
			<view v-if="!id" class="apply-btn apply-btn-next" @click="handleSave">
				<text>保存</text>
			</view>

		</view>
	</view>
</template>

<script setup>
	import customNav from '../../../components/custom-nav.vue'
	import {
		ref,
		unref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	const id = ref("")
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const model1 = ref({
		target_country: ''
	})
	const uFormRef = ref(null);
	const form1 = ref({})
	const studyChannelList = ref([])
	onLoad((e) => {
		if (e.form1) {
			form1.value = JSON.parse(e.form1)
			console.log('form1.value: ', form1.value)
		}
		if(e&&e.id){
			id.value = e.id
			getDetails()
		}
	})
	// 获取项目详情
	function getDetails() {
		proxy.$request({
			url: 'api/User/getMyApplyDetail',
			header:"application/x-www-form-urlencoded",
			data: {order_id:id.value}
		}).then(res => {
			model1.value = res.data
			model1.value.target_is_have_company = res.data.target_is_have_company+''
		})
	}
	const groupChange = (n) => {
		model1.value.plan_to_fund_name = studyChannelList.value.find(i=>i.id==n).name
	};
	const rules = {
		apply_intention_school: [{
			required: true,
			message: '请输入申请意向院校及专业志向',
			trigger: ['blur', 'change'],
		}],
		read_type_name: [{
			required: true,
			message: '请选择修读方式',
			trigger: ['blur', 'change'],
		}],
		proposed_education_name: [{
			type: 'string',
			message: '请选择拟报读学历',
			trigger: ['blur', 'change'],
		}],
		target_country: [{
			required: true,
			message: '请输入目标地区',
			trigger: ['blur', 'change'],
		}],
	}
	function handleSave() {
		uFormRef.value.validate().then(valid => {
			if (valid) {
				proxy.$request({
					url: 'api/Service/applyService',
					header: "application/x-www-form-urlencoded",
					data: {...form1.value,...model1.value,service_id:3}
				}).then(res => {
					if (res.code == 0) {
						return proxy.$toast(res.msg)
					} else {
						proxy.$toast(res.msg)
						setTimeout(()=>{
							uni.switchTab({
								url:"/pages/serve/serve"
							})
						},1500)
					}
				})
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
	function handlePre() {
		uni.navigateBack()
	}
	function getDict() {
		// 获取基金使用范围
		proxy.$request({
			url: '/api/Service/getPlanFundLists',
			header: "application/x-www-form-urlencoded",
			data: {
				lang: 1,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				studyChannelList.value = res.data
			}
		})
	}
	getDict()
</script>
<style lang="scss" scoped>
	.page-apply-wrapper {
		background: #f8f8ff;

		.apply-header {
			position: relative;

			.header-bg {
				width: 100%;
				height: 482rpx;
			}

			.apply-head_info {
				position: absolute;
				display: flex;
				top: 200rpx;
				justify-content: center;
				width: 100%;
				align-items: center;

				.flow-line {
					height: 1rpx;
					width: 300rpx;
					// background: #fff;
					border-top: 4rpx dashed #FF7139;
				}

				.flex-act {
					text {
						color: #333 !important;
					}
				}

				.flow-item {
					// position: relative;
					.r-text1{
						margin-left: -90rpx;
					}
					.r-text2{
						margin-left: -180rpx;
					}
					// position: relative;



					.flow-step {
						// background: #FFFFFF;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
					}

					text {
						position: absolute;
						margin-left: -30rpx;
						margin-top: 10rpx;
						font-size: 25rpx;
						color: #666;
					}
				}
			}
		}

		.apply-form-section {
			background: #fff;
			margin-top: 20rpx;
			// border-bottom: 20rpx solid #f8f8f8;
			padding: 32rpx;
		}

		.apply-content {
			position: relative;
			top: -130rpx;
			background: #f8f8ff;

			.apply-form {
				padding-bottom: 60rpx;
				background: #f8f8f8;
				border-radius: 20rpx;
			}

			.apply-form-step1 {
				margin: 10rpx;
			}

			.apply-form-step2 {
				margin-top: 30rpx;
				padding-bottom: 90rpx;
			}

			.serve-item-header {
				margin-bottom: 20rpx;

				.head-b {
					display: inline-block;
					width: 12rpx;
					height: 24rpx;
					background: #FF7139;

				}

				.item-tit {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 16rpx;
				}

			}
		}

		.apply-btn-wrapper {
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;
			z-index: 10;

			.apply-btn-pre {
				width: 215rpx;
				color: #FF7139;
				border: 2rpx solid #FF7139;
			}

			.apply-btn-next {
				width: 456rpx;
				background: linear-gradient(128deg, #FF9839 0%, #FF7139 100%);
				color: #fff;
			}

			.apply-btn {
				margin: 0 auto;
				height: 96rpx;

				border-radius: 200rpx;

				text-align: center;
				font-size: 32rpx;

				line-height: 96rpx;
			}

			// background: rgba(0,0,0,);
		}


	}
</style>